<template>
  <Card class="advanced-settings">
    <Tabs type="card" name="advanced-settings">
      <!-- 优先顺序标签页 -->
      <TabPane
        v-if="isAdmin"
        label="一车优先顺序"
        name="crane1-priority"
        tab="advanced-settings"
      >
        <div class="priority-table">
          <Table
            border
            :columns="priorityColumns"
            :data="localParams.priority.crane1.data"
          ></Table>
        </div>
      </TabPane>

      <TabPane
        v-if="isAdmin"
        label="二车优先顺序"
        name="crane2-priority"
        tab="advanced-settings"
      >
        <div class="priority-table">
          <Table
            border
            :columns="priorityColumns"
            :data="localParams.priority.crane2.data"
          ></Table>
        </div>
      </TabPane>

      <!-- 运行设定 -->
      <TabPane label="运行设定" name="operation" tab="advanced-settings">
        <Form :label-width="150" class="operation-form" label-position="left">
          <FormItem
            v-for="(item, index) in operationSettings"
            :key="index"
            :label="item.label"
          >
            <InputNumber
              v-model="localParams.operation[item.field].value"
              :min="0"
              :max="300"
              @on-blur="handleOperationBlur(item.field)"
            />
            <span class="unit">{{ item.unit }}</span>
          </FormItem>
        </Form>
      </TabPane>

      <!-- 高级设置 -->
      <TabPane
        label="高级设置"
        name="advanced"
        tab="advanced-settings"
        class="y-scroll"
      >
        <Row :gutter="24">
          <Col span="12">
            <div class="crane-settings">
              <div class="crane-title">一号行车设置</div>
              <Form
                :label-width="160"
                class="params-grid"
                label-position="left"
              >
                <FormItem
                  v-for="(item, index) in advancedSettings1"
                  :key="index"
                  :label="item.label"
                >
                  <InputNumber
                    v-if="item.type === 'number'"
                    v-model="localParams.advanced.crane1[item.field].value"
                    :min="0"
                    :max="500"
                    :readonly="item.readonly"
                    @on-blur="handleAdvancedBlur('crane1', item.field)"
                  />
                  <i-switch
                    v-else
                    v-model="localParams.advanced.crane1[item.field].value"
                    @on-change="handleAdvancedSwitch('crane1', item.field)"
                  />
                  <span v-if="item.unit" class="unit">{{ item.unit }}</span>
                </FormItem>
              </Form>
            </div>
          </Col>
          <Col span="12" class="left-border">
            <div class="crane-settings">
              <div class="crane-title">二号行车设置</div>
              <Form
                :label-width="160"
                class="params-grid"
                label-position="left"
              >
                <FormItem
                  v-for="(item, index) in advancedSettings2"
                  :key="index"
                  :label="item.label"
                >
                  <InputNumber
                    v-if="item.type === 'number'"
                    v-model="localParams.advanced.crane2[item.field].value"
                    :readonly="item.readonly"
                    :min="0"
                    :max="500"
                    @on-blur="handleAdvancedBlur('crane2', item.field)"
                  />
                  <i-switch
                    v-else
                    v-model="localParams.advanced.crane2[item.field].value"
                    @on-change="handleAdvancedSwitch('crane2', item.field)"
                  />
                  <span v-if="item.unit" class="unit">{{ item.unit }}</span>
                </FormItem>
              </Form>
            </div>
          </Col>
        </Row>
      </TabPane>
    </Tabs>
  </Card>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, N_drivingSet } from './config';

@T_srv.comp
export default class AdvancedSettings extends vue {
  @T_srv.prop({ required: true }) params!: N_drivingSet.AdvancedSettings;

  @T_srv.prop({ default: false }) isAdmin!: boolean;

  private localParams: any;

  private priorityColumns: any;

  private operationSettings = [
    { label: '工件预提时间', field: 'preLiftTime', unit: '秒' },
    { label: '整流位提料延时', field: 'rectifierLiftDelay', unit: '秒' },
    { label: '阳极化允许交换限时', field: 'allowExchangeLimit', unit: '秒' }
  ];

  private advancedSettings1 = [
    {
      label: '使用读卡器',
      field: 'useCardReader',
      type: 'switch',
      readonly: false
    },
    {
      label: '特殊工件移动有效',
      field: 'specialMaterialValid',
      type: 'switch',
      readonly: false
    },
    {
      label: '行车升慢速',
      field: 'liftSlow',
      type: 'number',
      unit: '秒',
      readonly: false
    },
    {
      label: '读码实工位',
      field: 'codeReadStation',
      type: 'number',
      unit: '',
      readonly: true
    },
    {
      label: '行车升快速',
      field: 'liftFast',
      type: 'number',
      unit: '秒',
      readonly: false
    },
    {
      label: '到位延时',
      field: 'positionDelay',
      type: 'number',
      unit: '秒',
      readonly: false
    },
    {
      label: '计数检测延时',
      field: 'countDetectDelay',
      type: 'number',
      unit: '秒',
      readonly: false
    }
  ];

  private advancedSettings2 = [
    {
      label: '使用读卡器',
      field: 'useCardReader',
      type: 'switch',
      readonly: false
    },
    // {
    //   label: '特殊工件移动有效',
    //   field: 'specialMaterialValid',
    //   type: 'switch',
    //   readonly: false
    // },
    {
      label: '行车升慢速',
      field: 'liftSlow',
      type: 'number',
      unit: '秒',
      readonly: false
    },
    {
      label: '读码实工位',
      field: 'codeReadStation',
      type: 'number',
      unit: '',
      readonly: true
    },
    {
      label: '行车升快速',
      field: 'liftFast',
      type: 'number',
      unit: '秒',
      readonly: false
    },
    {
      label: '到位延时',
      field: 'positionDelay',
      type: 'number',
      unit: '秒',
      readonly: false
    }
  ];

  @T_srv.watch('params', { deep: true })
  onParamsChange() {
    this.$nextTick(() => {
      this.localParams = Tsrv.utils.clone(this.params, true);
      this.$forceUpdate();
    });
  }

  created() {
    this.localParams = Tsrv.utils.clone(this.params, true);

    this.priorityColumns = Array.from({ length: 10 }, (_, i) => ({
      title: `点位 ${i + 1}`,
      key: `col${i}`,
      render: (h: any, params: any) => {
        return h('InputNumber', {
          props: {
            value: this.localParams.priority.crane1.data[params.index][
              `col${i}`
            ].value,
            max: 32000,
            min: 0
          },
          on: {
            input: (val: number) =>
              this.handlePriorityInput('crane1', params.index, i, val),
            'on-blur': () => this.handlePriorityBlur('crane1', params.index, i)
          }
        });
      }
    }));
  }

  handlePriorityInput(crane: string, row: number, i: number, value: number) {
    this.localParams.priority[crane].data[row][`col${i}`].value = value;
  }

  handlePriorityBlur(crane: string, row: number, i: number) {
    const original = Tsrv.utils.md5(
      JSON.stringify(this.params.priority[crane].data)
    );
    const current = Tsrv.utils.md5(
      JSON.stringify(this.localParams.priority[crane].data)
    );
    if (original !== current) {
      this.$emit('priority-change', {
        crane,
        row,
        i,
        code: this.localParams.priority[crane].data[row][`col${i}`].code,
        value: this.localParams.priority[crane].data[row][`col${i}`].value
      });
    }
  }

  handleOperationBlur(field: string) {
    const original = Tsrv.utils.md5(JSON.stringify(this.params.operation));
    const current = Tsrv.utils.md5(JSON.stringify(this.localParams.operation));
    if (original !== current) {
      this.$emit('operation-change', {
        field,
        code: this.localParams.operation[field].code,
        value: this.localParams.operation[field].value
      });
    }
  }

  handleAdvancedBlur(crane: string, field: string) {
    const original = Tsrv.utils.md5(JSON.stringify(this.params.advanced));
    const current = Tsrv.utils.md5(JSON.stringify(this.localParams.advanced));
    if (original !== current) {
      this.$emit('advanced-change', {
        crane,
        field,
        code: this.localParams.advanced[crane][field].code,
        value: this.localParams.advanced[crane][field].value
      });
    }
  }

  handleAdvancedSwitch(crane: string, field: string) {
    this.$emit('advanced-change', {
      crane,
      field,
      code: this.localParams.advanced[crane][field].code,
      value: this.localParams.advanced[crane][field].value
    });
  }
}
</script>

<style lang="scss" scoped>
$text-color: #515a6e;
$text-color-secondary: #808695;

.advanced-settings {
  ::v-deep .ivu-tabs {
    &-bar {
      margin-bottom: 16px;
    }
  }
  ::v-deep .ivu-card-body {
    height: 100%;
  }

  .priority-table {
    margin: 16px 0;

    ::v-deep .ivu-table {
      td {
        padding: 8px;

        .ivu-input-number {
          width: 100%;
        }
      }
    }
  }

  .operation-form {
    padding: 16px;
  }

  .crane-settings {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-content: center;

    .crane-title {
      margin: 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: $text-color;
      text-align: center;
    }

    .params-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .unit {
      margin-left: 8px;
      color: $text-color-secondary;
    }
  }

  .left-border {
    border-left: 16px solid #e3e8e7;
  }

  ::v-deep .ivu-input-number {
    width: 200px;

    &-input {
      text-align: left;
    }
  }
}
</style>
